@import "../scss/mixins-css3";

$HTML-CODE-BACKGROUND-COLOR     : #EDF6F8;
$HTML-CODE-BORDER-COLOR         : #dde7ea; //darken($HTML-CODE-BACKGROUND-COLOR, 4.3%);

$MODIFYER-BACKGROUND-COLOR      : #f5f5f5;
$MODIFYER-BORDER-COLOR          : #eee;


.styleguide-content {
  float: left;
  margin-left: 20px;
  font-size: 14px;
  color: #333;
  width: 690px;
}

.styleguide-example {
  margin: 15px auto;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #DDD;
  @include box-shadow(0 0 5px rgba(0, 0, 0, 0.1));

  &:first-child {
    margin-top: 3px;
  }

  > h3 {
    margin: -1px -1px 0;
    padding: 10px;
    color: #FFF;
    font-size: 12px;
    background-color: #333;
    border-top: 1px solid #000;

    > em, > em > a {
      float: right;
      font-style: normal;
      font-weight: normal;
      color: #aaa;
    }
  }

  .styleguide-description {
    padding: 1px 10px;
    background-color: #F1F1F1;
    border-bottom: 1px solid #DDD;
  }

  .styleguide-element {
    position: relative;
    padding: 20px;

    .styleguide-modifier-name {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      padding: 5px 15px;
      font-size: 11px;
      color: #999;
      background-color: $MODIFYER-BACKGROUND-COLOR;
      border: 1px solid $MODIFYER-BORDER-COLOR;
      border-top: none;
    }
  }

  .styleguide-html {
    position: relative;
    padding: 15px 15px;
    background-color: $HTML-CODE-BACKGROUND-COLOR;
    border-top: 1px solid $HTML-CODE-BORDER-COLOR;
    overflow: auto;

    &:after {
      position: absolute;
      top: 0;
      right: 0;
      padding: 5px 15px;
      font-size: 11px;
      color: #999;
      background-color: $MODIFYER-BACKGROUND-COLOR;
      border: 1px solid $HTML-CODE-BORDER-COLOR;
      border-top: none;
      content: "Example";
    }

    .syntaxhighlighter {
      margin: 0 !important;
      background-color: $HTML-CODE-BACKGROUND-COLOR !important;

      td.code .line {
        background-color: $HTML-CODE-BACKGROUND-COLOR !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
      }
    }
  }
}

.styleguide-element + .styleguide-element {
  border-top: 1px solid #EEE;
}

.styleguide-html  + .styleguide-element {
  border-top: 1px solid $HTML-CODE-BORDER-COLOR;
}

